<template>
	<HeaderNav active-index="3"></HeaderNav>
	<TaskContainer>
	  <div class="toolbar">
		<el-button type="primary" @click="handleAdd">
		  <template #icon>
			<el-icon><CirclePlus /></el-icon>
		  </template>
		  添加人员组
		</el-button>
	  </div>
	  <div class="group-cards">
		<el-card v-for="group in list" :key="group.id" class="group-card" shadow="hover">
		  <div class="group-header">
			<h3 class="group-name">{{ group.name }}</h3>
			<span class="group-num">{{ group.num }}人</span>
		  </div>
		  <div class="group-time">
			<el-icon><Timer /></el-icon>
			<span>{{ group.create_time }}</span>
		  </div>
		  <div class="divider"></div>
		  <div class="group-actions">
			<el-button type="info" size="small" @click="handleApply(group)">
			  <template #icon>
				<el-icon><User /></el-icon>
			  </template>
			  添加人员
			</el-button>
			<el-button type="warning" size="small" @click="handleTask(group)">
			  <template #icon>
				<el-icon><Document /></el-icon>
			  </template>
			  分配任务
			</el-button>
			<el-button size="small" @click="handleEdit(group)">
			  <template #icon>
				<el-icon><Edit /></el-icon>
			  </template>
			  编辑
			</el-button>
			<el-button type="danger" size="small" @click="handleDelete(group)">
			  <template #icon>
				<el-icon><Delete /></el-icon>
			  </template>
			  删除
			</el-button>
		  </div>
		</el-card>
	  </div>
	</TaskContainer>

	<Footor></Footor>

	<!-- 添加人员组 -->
	<el-dialog v-model="showDialog" :title="title" width="450">
		<GroupAddView v-model:group-name="groupName" />
		<template #footer>
		<div class="dialog-footer">
			<el-button type="primary" @click="handleSaveGroup">保存</el-button>
			<el-button @click="showDialog = false">关闭</el-button>
		</div>
		</template>
	</el-dialog>

	<el-dialog v-model="showDialog2" title="分配人员" width="620" top="10vh">
		<GroupApplyView :id = "groupId" ref="groupApplyView"/>
		<template #footer>
		<div class="dialog-footer">
			<el-button type="primary" @click="SaveUserGroup">保存</el-button>
			<el-button @click="showDialog2 = false">关闭</el-button>
		</div>
		</template>
	</el-dialog>

	<el-dialog v-model="showDialog3" title="分配任务" width="70%" top="10px" @opened="onTaskDialogOpened">
		<GroupTaskListView ref="groupTaskListView" :groupId="groupId" />
		<template #footer>
		<div class="dialog-footer">
			<el-button type="primary" @click="saveGroupTasks">保存</el-button>
			<el-button @click="showDialog3 = false">关闭</el-button>
		</div>
		</template>
	</el-dialog>



  </template>
  
  <script>
  import HeaderNav from "@/components/HeaderNav.vue"
  import TaskContainer from "@/components/TaskContainer.vue"
  import GroupAddView from "./GroupAddView.vue"
  import GroupApplyView from "./GroupApplyView.vue"
  import GroupTaskListView from "./GroupTaskListView.vue"
  import Footor from '@/components/Footor.vue'
  import API from '@/api/index.js'

  export default {
	components: {
	  HeaderNav,
	  TaskContainer, 
	  GroupAddView,
	  GroupApplyView, 
	  GroupTaskListView,
	  Footor,
	},
	data() {
	  return {
		showDialog: false,
		showDialog2: false,
		showDialog3: false, 
		groupId: null, // 记录组ID
		title: "" , 
		groupName: null,  // 设置当前组名
		list: [
		// 	id: 5,
		// 	create_time: '2016-05-03 11:22:33',
		// 	num: 20,
		// 	name: '第三小组' 
		//   },
		]
	  }
	},
	created() {
		this.queryGroupList()
	},
	methods: {
		queryGroupList(){
			API.get_group()
			.then(res => {
				this.list = res.data;
			})
		},
		handleAdd() {
			this.showDialog = true ;
			this.title = "添加人员组";
			this.groupName = null ;
		},
		handleApply(group) {
			this.groupId = group.id,
			this.showDialog2 = true ;
		},
		handleTask(group) {
			this.groupId = group.id;
			this.showDialog3 = true;
		},
		onTaskDialogOpened() {
			if (this.$refs.groupTaskListView && typeof this.$refs.groupTaskListView.selectUserTask === 'function') {
				this.$refs.groupTaskListView.selectUserTask();
			}
		},
		handleEdit(group) {
			this.groupId = group.id
			this.showDialog = true ;
			this.title = "编辑人员组";
			this.groupName = group.name ;
		},
		handleDelete(group) {
			this.$layer.confirm("您确定要移除该人员组吗?", {
				icon: 3,
				title: '提示'
			}, async () => {
				try {
					// 显示加载状态
					this.$layer.load();
					// 调用API删除组
					await API.deleteGroup({
						group_id: group.id
					});
					// 关闭加载状态
					this.$layer.closeAll('loading');
					this.queryGroupList();
					this.$layer.msg(`${group.name}已成功移除`, { icon: 1, time: 1000 });
				} catch (error) {
					// 关闭加载状态
					this.$layer.closeAll('loading');
					// 显示错误提示
					this.$layer.msg('移除失败: ' + error.message, { icon: 2, time: 2000 });
					console.error('删除组失败', error);
				}
			});
		},
		async SaveUserGroup(){
			this.$layer.load();
			await this.$refs.groupApplyView.handleSave();
			this.$layer.closeAll('loading');
			// 重新获取最新分组数据后，强制刷新视图
			const res = await API.get_group();
			this.list = res.data.map(group => ({ ...group })); // 触发响应式
			this.$forceUpdate(); // 强制刷新视图
			// this.$layer.msg('分配成功', { icon: 1, time: 1000 });
			this.showDialog2 = false;
		},
		handleSaveGroup() {
			if (this.title === '添加人员组') {
				this.saveAddGroup();
			} else {
				this.saveGroupName();
			}
		},
		saveGroupName() {
			// 验证组名是否为空
			if (!this.groupName) {
				this.$message.error('组名不能为空');
				return;
			}
			// 编辑模式：调用API更新组名
			API.updateGroupName({
				group_id: this.groupId,
				name: this.groupName
			})
			.then(res => {
				this.$message.success('组名更新成功');
				this.showDialog = false;
				this.queryGroupList(); // 刷新组列表
			})
			.catch(err => {
				this.$message.error('更新失败: ' + err.message);
				console.error('更新组名失败', err);
			});
		},
		async saveAddGroup() {
			// 保存新建组
			if (!this.groupName) {
				this.$message.error('组名不能为空');
				return;
			}
			try {
				await API.addGroup({ name: this.groupName });
				this.$message.success('人员组添加成功');
				this.showDialog = false;
				this.queryGroupList();
			} catch (err) {
				this.$message.error('添加失败: ' + err.message);
			}
		},
		async saveGroupTasks() {
			const groupTaskListView = this.$refs.groupTaskListView;
			if (!groupTaskListView || typeof groupTaskListView.handleAssignTasks !== 'function') {
				this.$message.warning('子组件未实现分配方法');
				return;
			}
			await groupTaskListView.handleAssignTasks();
			this.showDialog3 = false;
		},
	},
  }
  </script>
  
  <style scoped>
  .toolbar {
	display: flex;
	justify-content: flex-end;
	margin: 20px;
  }
  
  .group-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 0 50px;
  }
  
  .group-card {
	flex: 0 1 calc(25% - 20px);
	box-sizing: border-box;
	transition: transform 0.3s, box-shadow 0.3s;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	overflow: hidden;
  }
  
  .group-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }
  
  .group-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .group-name {
	font-size: 16px;
	font-weight: bold;
	color: #ffffff; /* 调整为白色以确保与背景对比 */
  }
  
  .group-num {
	background-color: #f0f0f0;
	padding: 5px 10px;
	border-radius: 12px;
	color: #333;
  }
  
  .group-time {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	padding: 0 20px;
	color: #888;
  }
  
  .group-time el-icon {
	margin-right: 5px;
  }
  
  .divider {
	height: 1px;
	background-color: #e0e0e0;
	margin: 10px 0;
  }
  
  .group-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 10px;
    padding: 10px 10px 10px 0px;
    box-sizing: border-box;
    width: 100%;
  }
  .group-actions .el-button {
    flex-shrink: 0;
    min-width: 0;
    max-width: 25%;
    box-sizing: border-box;
  }
  @media (max-width: 1200px) {
    .group-card {
      flex: 0 1 calc(50% - 20px);
    }
    .group-actions {
      flex-wrap: wrap;
    }
  }
  @media (max-width: 800px) {
    .group-card {
      flex: 0 1 100%;
    }
    .group-actions {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding: 0 10px 10px 10px;
      flex-wrap: nowrap;
      width: 100%;
    }
    .group-actions .el-button {
      width: 100%;
      max-width: 100%;
      text-align: left;
      margin-left: 0 !important;
    }
  }
  </style>